<template>
  <view class="container">
    <map style="width: 100%; height: 866rpx" :scale="scale" :markers="covers" :latitude="latitude" :longitude="longitude">
      <cover-view slot="callout">
        <block v-for="(item, index) in covers" :key="index">
          <cover-view class="customCallout" :marker-id="item.id">
            <cover-view class="content">{{ item.title }}</cover-view>
          </cover-view>
        </block>
      </cover-view>
    </map>
    <view class="paybox">
      <!-- 预估 -->
      <view style="display: flex; align-items: center; justify-content: space-between">
        <view @click="goyugudetail">
          <text style="font-weight: 500; font-size: 26rpx; color: #222222; margin-right: 16rpx">预估</text>
          <text v-if="obj.couponlog.actual_money" style="font-weight: bold; font-size: 48rpx; color: #222222">{{ obj.couponlog.actual_money }}</text>
          <text v-else style="font-weight: bold; font-size: 48rpx; color: #222222">{{ obj.money }}</text>
          <text style="font-weight: 500; font-size: 26rpx; color: #222222">元</text>
          <uni-icons type="right" size="15"></uni-icons>
        </view>
        <radio style="transform: scale(0.7)" color="#3483F6" value="yugu" :checked="yugu" @click="yugu = !yugu" />
      </view>
      <!-- 一口价 -->
      <view style="display: flex; align-items: center; justify-content: space-between; margin-top: 36rpx">
        <view>
          <text style="font-weight: 500; font-size: 26rpx; color: #222222; margin-right: 16rpx">一口价特惠</text>
          <text style="font-weight: bold; font-size: 48rpx; color: #222222">{{ obj.special_money }}</text>
          <text style="font-weight: 500; font-size: 26rpx; color: #222222">元</text>
        </view>
        <radio style="transform: scale(0.7)" color="#3483F6" :disabled="obj.satisfy == 0" :value="!yugu" :checked="!yugu" @click="yugu = !yugu" />
      </view>
      <!-- 给朋友叫车 -->
      <view class="other" @click="goother">
        <text style="margin-right: 10rpx">{{ mobile ? mobile : '替朋友叫代驾' }}</text>
        <uni-icons type="right" size="20"></uni-icons>
      </view>
      <!-- 立即下单 -->
      <view class="orderbtn" @click="$refs.pay.open()">立即下单</view>
    </view>
    <!-- 支付弹框 -->
    <uni-popup ref="pay" type="bottom" border-radius="10px 10px 0 0">
      <view class="box">
        <!-- 标题 -->
        <view class="boxhead">
          <view></view>
          <view>选择支付方式</view>
          <uni-icons type="close" size="20" @click="$refs.pay.close()"></uni-icons>
        </view>
        <!-- 支付金额 -->
        <view style="text-align: center; margin-top: 44rpx">
          <text style="font-weight: 500; font-size: 32rpx; color: #ec0000">￥</text>
          <text style="font-weight: bold; font-size: 48rpx; color: #ec0000">
            {{ yugu ? (obj.couponlog.actual_money ? obj.couponlog.actual_money : obj.money) : obj.special_money }}
          </text>
        </view>
        <!-- 选择支付方式 -->
        <view class="payitem" @click="paystyle = !paystyle">
          <!-- 余额支付 -->
          <view class="item">
            <image src="../../static/images/balance.png" mode="" style="width: 60rpx; height: 60rpx; margin-right: 24rpx"></image>
            <text>余额支付</text>
            <text>（￥ {{ lastmoney + ')' }}</text>
          </view>
          <radio style="transform: scale(0.7)" color="#3483F6" :value="paystyle" :checked="paystyle" />
        </view>
        <!-- 微信支付 -->
        <view class="payitem" @click="paystyle = !paystyle">
          <view class="item">
            <image src="../../static/images/weixinapy.png" mode="" style="width: 60rpx; height: 60rpx; margin-right: 24rpx"></image>
            <text>微信支付</text>
          </view>
          <radio style="transform: scale(0.7)" color="#3483F6" :value="paystyle" :checked="!paystyle" />
        </view>
        <view class="paybtn" @click="submit">确定</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      obj: {},
      mobile: '',
      lastmoney: '',
      yugu: true, // 预估的单选框
      paystyle: true, // 支付的方式
      latitude: null,
      longitude: null,
      covers: [
        {
          id: 1,
          latitude: 39.909,
          longitude: 116.39742,
          iconPath: '/static/images/start.png',
          customCallout: {
            anchorY: 0, // Y轴偏移量
            anchorX: 0, // X轴偏移量
            display: 'ALWAYS' // 一直展示
          },
          title: '',
          width: '46rpx',
          height: '56rpx'
        },
        {
          id: 2,
          latitude: 39.9,
          longitude: 116.39,
          iconPath: '/static/images/end.png',
          customCallout: {
            anchorY: 0, // Y轴偏移量
            anchorX: 0, // X轴偏移量
            display: 'ALWAYS' // 一直展示
          },
          title: '',
          width: '46rpx',
          height: '56rpx'
        }
      ],
      scale: 12
    };
  },
  onLoad() {
    // 获取余额
    this.getlastmoney();
    // 获取价格
    this.getmoney();
  },

  onShow() {
    if (uni.getStorageSync('firendphone')) {
      this.mobile = uni.getStorageSync('firendphone');
      console.log('走着了吗-=-=-=-==-', this.mobile);
    } else {
      this.mobile = uni.getStorageSync('user').mobile;
    }

    if (uni.getStorageSync('startaddress')) {
      this.$nextTick(() => {
        this.latitude = uni.getStorageSync('startaddress').location.lat;
        this.longitude = uni.getStorageSync('startaddress').location.lng;
        this.covers[0].title = uni.getStorageSync('startaddress').title;
        this.covers[0].latitude = uni.getStorageSync('startaddress').location.lat;
        this.covers[0].longitude = uni.getStorageSync('startaddress').location.lng;
      });
    }
    if (uni.getStorageSync('endaddress')) {
      this.$nextTick(() => {
        this.covers[1].title = uni.getStorageSync('endaddress').title;
        this.covers[1].latitude = uni.getStorageSync('endaddress').location.lat;
        this.covers[1].longitude = uni.getStorageSync('endaddress').location.lng;
      });
    }
  },
  methods: {
    // 提交支付
    submit() {
      this.http('/order/add', {
        starting: uni.getStorageSync('startaddress').title,
        end: uni.getStorageSync('endaddress').title,
        start_lat: uni.getStorageSync('startaddress').location.lat,
        start_lng: uni.getStorageSync('startaddress').location.lng,
        edn_lat: uni.getStorageSync('endaddress').location.lat,
        edn_lon: uni.getStorageSync('endaddress').location.lng,
        money: this.obj.money.split(','),
        coupon_log_id: this.obj.couponlog.length != 0 ? this.obj.couponlog.coupon_log_id : 0,
        // actual_money: this.obj.couponlog.length != 0 ? this.obj.couponlog.actual_money : this.obj.money,
        actual_money: this.yugu ? (this.obj.couponlog.actual_money ? this.obj.couponlog.actual_money : this.obj.money) : this.obj.special_money,
        day_night: this.obj.day_night,
        type_money: this.yugu ? 1 : 2,
        mobile: this.mobile,
        distance: this.obj.distance,
        ago_distance: this.obj.ago_distance,
        ago_money: this.obj.ago_money,
        is_mobile: uni.getStorageSync('firendphone') ? '1' : '0',
        citys: uni.getStorageSync('currentcity'),
        driver_id: uni.getStorageSync('drierid') || ''
      }).then((res) => {
        console.log('创建订单', res);
        this.delorderid = res.data.order_id;
        if (res.code == 1) {
          if (this.paystyle) {
            this.http('/order/orderPay', {
              order_id: res.data.order_id,
              pay_type: 'remain'
            }).then((res) => {
              console.log(res);
              if (res.code == 1) {
                uni.showToast({
                  title: '支付成功'
                });
                uni.removeStorageSync('endaddress');
                uni.redirectTo({
                  url: '/order/callorderdetail/callorderdetail?orderid=' + this.delorderid
                });
              } else {
                uni.showToast({
                  title: '支付失败',
                  icon: 'none'
                });
              }
            });
          } else {
            this.http('/order/orderPay', {
              order_id: res.data.order_id,
              pay_type: 'wechat'
            }).then((res) => {
              if (res.code == 1) {
                console.log(res);
                uni.requestPayment({
                  provider: 'wxpay',
                  package: res.data.package,
                  paySign: res.data.paySign,
                  nonceStr: res.data.nonceStr,
                  timeStamp: res.data.timeStamp,
                  signType: res.data.signType,
                  success: (res) => {
                    console.log(res);
                    uni.showToast({
                      title: '支付成功'
                    });
                    uni.removeStorageSync('endaddress');
                    uni.redirectTo({
                      url: '/order/callorderdetail/callorderdetail?orderid=' + this.delorderid
                    });
                  },
                  fail: (res) => {
                    console.log(res);
                    this.http('/order/delOrder', {
                      order_id: this.delorderid
                    });
                  }
                });
              } else {
                uni.showToast({
                  title: '微信支付失败',
                  icon: 'none'
                });
              }
            });
          }
        } else {
          uni.showToast({
            title: '订单创建失败',
            icon: 'none'
          });
        }
      });
    },
    // 获取价格
    getmoney() {
      this.http('/order/compute', {
        start_lat: uni.getStorageSync('startaddress').location.lat,
        start_lng: uni.getStorageSync('startaddress').location.lng,
        edn_lat: uni.getStorageSync('endaddress').location.lat,
        edn_lon: uni.getStorageSync('endaddress').location.lng
      }).then((res) => {
        console.log('计算距离的结果', res);
        this.obj = res.data;
      });
    },
    // 获取余额
    getlastmoney() {
      this.http('/user/myWallet').then((res) => {
        console.log('余额', res);
        this.lastmoney = res.data.money;
      });
    },
    // 跳转到预估详情
    goyugudetail() {
      uni.navigateTo({
        url: '/pages/yugudetail/yugudetail'
      });
    },
    // 帮比人叫车
    goother() {
      uni.navigateTo({
        url: '/pages/changeprople/changeprople'
      });
    }
  }
};
</script>

<style scoped lang="scss">
.customCallout {
  box-sizing: border-box;
  background-color: #32b499;

  border-radius: 30rpx;
  display: inline-flex;
  padding: 6rpx 24rpx;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.container {
  box-sizing: border-box;
  .paybox {
    box-sizing: border-box;
    width: 750rpx;
    height: 582rpx;
    background: linear-gradient(179deg, #c5ddff 0%, #ffffff 100%);
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    padding: 82rpx 32rpx;
  }
  .other {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 30rpx;
    color: #222222;
    margin: 98rpx 0 36rpx 0;
  }
  .orderbtn {
    width: 654rpx;
    height: 92rpx;
    text-align: center;
    line-height: 92rpx;
    font-weight: 500;
    font-size: 30rpx;
    color: #ffffff;
    background: #3483f6;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin-left: 16rpx;
  }
  .box {
    box-sizing: border-box;
    width: 750rpx;
    height: 706rpx;
    background: #ffffff;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    padding: 32rpx 54rpx;

    .boxhead {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .payitem {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 42rpx;
      .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
    .paybtn {
      width: 654rpx;
      height: 92rpx;
      background: #3483f6;
      line-height: 92rpx;
      text-align: center;
      font-weight: 500;
      font-size: 30rpx;
      color: #ffffff;
      margin-top: 90rpx;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }
  }
}
</style>
